<template>
  <div>
    <Header :head="head" />
    <div class="div">
      <ul>
        <router-link
          :to="'/orderdetailed?id='+item.id"
          tag="li"
          v-for="(item, index) in list"
          :key="index"
        >
          <img :src="'https://elm.cangdu.org/img/'+item.restaurant_image_url" alt />
          <div>
            <div class="head">
              <h4>{{item.restaurant_name}}</h4>
              <p>{{item.status_bar.title}}</p>
              <p>{{item.formatted_created_at}}</p>
            </div>
            <div class="body">
              <p>￥{{item.total_amount}}</p>
              <router-link :to="'/shop?id='+item.restaurant_id" class="button">再来一单</router-link>
            </div>
          </div>
        </router-link>
      </ul>
    </div>
  </div>
</template>
<script>
import Header from '../common/Header'
import { Toast } from 'mint-ui'
export default {
  components: {
    Header
  },
  data() {
    return {
      head: '订单页面',
      list: null
    }
  },
  methods: {
    getorders() {
      let userid = JSON.parse(localStorage.getItem('user')).user_id
      this.$http
        .get('bos/v2/users/' + userid + '/orders', {
          params: {
            limit: 10
          }
        })
        .then(data => {
          this.list = data.body
          //window.console.log(this.list)
        })
        .catch(() => {
          Toast({
            message: '请求失败,请检查网络连接!',
            duration: 1000
          })
        })
    }
  },
  created() {
    this.getorders()
  }
}
</script>
<style scoped>
* {
  margin: 0;
  padding: 0;
}
ul {
  margin: 0;
  padding: 0;
}
li {
  list-style: none;
  padding: 5vw;
  display: flex;
  border-bottom: 1px #f5f5f5 solid;
}
li > img {
  width: 3rem;
  height: 3rem;
  margin-right: 5vw;
}
li > div {
  width: 100%;
}
.head {
  position: relative;
  width: 100%;
}
.head > h4 {
  font-size: 1rem;
}
.head > p {
  font-size: 0.7rem;
}
.head > p:nth-child(2) {
  position: absolute;
  right: 0;
  top: 0;
}
.body {
  position: relative;
  width: 100%;
  overflow: hidden;
  zoom: 1;
}
.body > p {
  text-align: right;
  color: #ff5f3e;
  border-bottom: 1px #f5f5f5 solid;
  border-top: 1px #f5f5f5 solid;
}
.button {
  border-radius: 0.3rem;
  font-size: 0.7rem;
  padding: 0 0.3rem;
  border: 1px #26a2ff solid;
  float: right;
  margin-top: 0.5rem;
}
</style>